<!DOCTYPE html>
<html lang="en">
<head>
    <title>集团管理层app</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        [v-cloak] {
            display: none;
        }

        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        body {
            margin: 1px;
        }

        table {
            border-spacing: 0;
            border-collapse: collapse;
            display: table;
        }

        table.text-center, table.text-center td, table.text-center th {
            text-align: center;
            font-size: x-small;
        }

        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
            border: 1px solid #cbcbcd;
        }

        .table th {
            background: yellow;
        }

        table td {
            padding-top: 5px;
            padding-bottom: 5px;
        }

        .table-bordered {
            border: 1px solid #cbcbcd;
        }

        .table {
            width: 130%;
            max-width: 130%;
            margin-bottom: 20px;
        }


    </style>
</head>
<body>
<section class="content" id="app">

    <table class="table table-hover table-bordered text-center " style="width: 130%">
        <thead>
        <tr>
            <template v-if="visitType==1">
                <th style="width:50px">面访<br/>排名
                    <template v-if="hour<8 && isDay"><br/>(昨日)</template>
                </th>
            </template>
            <template v-else>
                <th style="width:50px">电访<br/>排名
                    <template v-if="isDay"><br/>(昨日)</template>
                </th>
            </template>

            <template v-if="visitType==1">
                <th style="width:40px">人均<br/>完成
                    <template v-if="hour<8 && isDay"><br/>(昨日)</template>
                </th>
            </template>
            <template v-else>
                <th style="width:40px">人均<br/>完成
                    <template v-if="isDay"><br/>(昨日)</template>
                </th>
            </template>


            <th style="width:77px">公司</th>

            <th style="width:60px">总经理/<br/>销售总监</th>


            <template v-if="visitType==1">
                <th style="width:40px">目标
                    <template v-if="hour<8 && isDay"><br/>(昨日)</template>
                </th>
            </template>
            <template v-else>
                <th style="width:40px">目标
                    <template v-if="isDay"><br/>(昨日)</template>
                </th>
            </template>

            <template v-if="visitType==1">
                <th style="width:40px">完成
                    <template v-if="hour<8 && isDay"><br/>(昨日)</template>
                </th>
            </template>
            <template v-else>
                <th style="width:40px">完成
                    <template v-if="isDay"><br/>(昨日)</template>
                </th>
            </template>

            <template v-if="visitType==1">
                <th style="width:40px">完成率
                    <template v-if="hour<8 && isDay"><br/>(昨日)</template>
                </th>
            </template>
            <template v-else>
                <th style="width:50px">完成率
                    <template v-if="isDay"><br/>(昨日)</template>
                </th>
            </template>

            <th style="width:60px">区域经理<br/>在职人数</th>
            <th style="width:60px">请假人数<template v-if="isDay"><br/>(昨日)</template></th>
            <th style="width:60px">区域经理<br/>标配人数</th>

        </tr>
        </thead>
        <tbody v-cloak>
        <tr v-for="(item,i) in sendData">
            <td>{{item.rownum}}</td>
            <td>{{item.averageComplete}}</td>
            <td style="color:#169BD5;cursor: pointer" @click="lookInterview(item,'day')">
                {{item.companyName}}
            </td>
            <td>
                {{item.managerName}}{{item.salerManagerName?item.managerName?"/"+item.salerManagerName:item.salerManagerName:""}}
            </td>
            <td>{{item.target==""?"-":item.target}}</td>
            <td>{{item.complete==""?"0":item.complete}}</td>
            <td>{{item.completionRate}}%</td>
            <td>{{item.regionManagerNum}}</td>
            <td>{{item.leaveNumber}}</td>
            <td>{{item.standard}}</td>
        </tr>
        <tr>
            <td>合计</td>
            <td>{{calculation[0].daily}}</td>
            <td>-</td>
            <td>-</td>
            <td>{{calculation[0].targetDayCount}}</td>
            <td>{{calculation[0].finishDayCount}}</td>
            <td>{{calculation[0].completionRate}}</td>
            <td>{{calculation[0].regionNumber}}</td>
            <td>{{calculation[0].leaveNumber}}</td>
            <td>{{calculation[0].standard}}</td>
        </tr>
        </tbody>
    </table>
        <!-- /.box-body -->
    <div class="row">
        <div
                id="container" style="height: 400px; margin: 0 auto;width: 100%;"></div>
    </div>
</section>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="../../../dist/plugins/highcharts/highcharts.js"></script>
<script src="/dist/js/oaApp.js"></script>
<script type="text/javascript">
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }

    function isDay(time) {
        //2018-01-01
        if (time.length > 8) {
            return true
        } else {
            return false
        }
    }


    var app = new Vue({
        el: '#app',
        data: {
            currentUserId: "",
            isDay: isDay(getUrlParam('dateTime')),
            visitType: getUrlParam('visitType'),//0电访 1面访
            hour: new Date().getHours(),
            sendData: [],
            calculation: [{
                "targetDayCount": 0,
                "finishDayCount": 0,
                "regionNumber": 0,
                "daily": 0,
                "completionRate": 0
            }, {
                "targetDayCount": 0,
                "finishDayCount": 0,
                "regionNumber": 0,
                "daily": 0,
                "completionRate": 0
            }]
        },
        methods: {
            lookInterview: function (item, type) {
                prompt(JSON.stringify(item));
            },
            getCount: function (arr, key) {
                var number = 0;
                for (var i = arr.length - 1; i >= 0; i--) {
                    number += (arr[i][key]&&arr[i][key]!='-'? arr[i][key] : 0)
                }
                return number;
            },
            getAllCount: function (arr, type) {
                if (type == "1") {
                    this.calculation[1].targetDayCount = this.getCount(arr, "target");
                    this.calculation[1].finishDayCount = this.getCount(arr, "complete");
                    this.calculation[1].regionNumber = this.getCount(arr, "regionManagerNum");
                    this.calculation[1].daily = (this.calculation[1].finishDayCount / this.calculation[1].regionNumber).toFixed(2);
                    if (this.calculation[1].targetDayCount == 0) {
                        this.calculation[1].completionRate = "0.00%";
                    } else {
                        this.calculation[1].completionRate = (this.calculation[1].finishDayCount / this.calculation[1].targetDayCount * 100).toFixed(2) + "%";
                    }
                } else {
                    this.calculation[0].targetDayCount = this.getCount(arr, "target");
                    this.calculation[0].finishDayCount = this.getCount(arr, "complete");
                    this.calculation[0].standard=this.getCount(arr,"standard");
                    this.calculation[0].leaveNumber=this.getCount(arr,"leaveNumber");
                    this.calculation[0].regionNumber = this.getCount(arr, "regionManagerNum");
                    this.calculation[0].daily = (this.calculation[0].finishDayCount / this.calculation[0].regionNumber).toFixed(2);
                    if (this.calculation[0].targetDayCount == 0) {
                        this.calculation[0].completionRate = "0.00%";
                    } else {
                        this.calculation[0].completionRate = (this.calculation[0].finishDayCount / this.calculation[0].targetDayCount * 100).toFixed(2) + "%";
                    }
                }
            },
            showChart: function (sendData) {
                //图表
                var color = this.visitType == 1 ? ['#96d4a3'] : ['#7cb5e3']
                var chart = Highcharts.chart('container', {
                    chart: {
                        type: 'column'
                    },
//                    colors: color,
                    legend: {
                        enabled: false
//                        align: 'right', //水平方向位置
//                        verticalAlign: 'top', //垂直方向位置
//                        floating: true,
//                        x: 0, //距离x轴的距离
//                        y: 10 //距离Y轴的距离
                    },
                    credits: {enabled: false},
                    title: {
                        text: '',
                    },
                    subtitle: {
                        text: ''
                    },
                    xAxis: {
                        categories: sendData.companyName,
                        crosshair: true
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: '人均完成(个)'
                        }
                    },
                    tooltip: {
                        headerFormat: '<span style="font-size:10px">{point.key}:{point.y}</span><table>',
                        pointFormat: '',
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0
                        }
                    },
                    series: [{
                        name: this.visitType == 1 ? "面访" : "电访",
                        data: this.visitType == 1 ? sendData.faceValue : sendData.telValue
                    }]
                });
            }
        },
        mounted: function () {
            var that = this;
            var data = {
                userId: getUrlParam('userId'),
                dateTime: getUrlParam('dateTime'),
                type: getUrlParam('visitType'),
                isApp: "1"
            };
            //报表
            $.ajax({
                url: server.ip + urlConfig.crm.customer.getCompanyByManage,
                contentType: 'application/json;charset=utf-8',
                type: "POST",
                data: JSON.stringify(data),
                success: function (r) {
                    var res = JSON.parse(r)
                    that.sendData = res.data.sendData;
                    that.getAllCount(res.data.sendData);
                },
                error: function (e) {
                    alert(e.responseText)
                }
            });
            //柱状图
            $.ajax({
                url: server.ip + urlConfig.crm.customer.getCompanyByChart,
                contentType: 'application/json;charset=utf-8',
                type: "POST",
                data: JSON.stringify(data),
                success: function (r) {
                    var res = JSON.parse(r)
                    that.showChart(res.data.sendData)
                },
                error: function (e) {
                    alert(e.responseText)
                }
            });
        }
    });
</script>

</body>
</html>